<template>
  <el-dialog
    title="会员介绍"
    :visible.sync="dialogVisible"
    top="2%"
    width="98%">
    <level-info-box v-if="currLevel>-1" :curr-level="currLevel"/>
    <div align="center" style="padding-top: 10px;">
      <el-button @click="buyVip" size="small" type="danger" style="width: 50%">
        {{ currLevel===0?'开通会员':'续费会员' }}
      </el-button>
    </div>
  </el-dialog>

</template>

<script>
import LevelInfoBox from './LevelInfoBox'
export default {
  name: 'LevelInfoDialog',
  components: {LevelInfoBox},
  data: function () {
    return {
      currLevel:-1,
      dialogVisible:false,
    }
  },
  watch:{
    dialogVisible:function(){
      if(!this.dialogVisible){
        this.currLevel=-1
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('LevelInfoDialogCallBus',function (currLevel){
      $this.dialogVisible=true
      $this.currLevel=currLevel?currLevel:0
      $this.$forceUpdate()
    })
  },
  methods: {
    buyVip:function () {
      let $this=this
      $this.dialogVisible=false
      $this.bus.$emit('BuyVipDialogCallBus',false,{
        level:$this.currLevel
      })
      $this.$forceUpdate()
    },
  }
}
</script>

<style scoped>

</style>
